<template>
  <view class="common-card" style="padding-top: 0rpx;position: relative">
    <image src="/static/use_info_bg.png" style="height: 135rpx;width: 362rpx;position: absolute;right: 0;margin-top: 15rpx"/>
    <item-blue-title-view :show-bar="false" title="使用情况" style="padding: 20rpx 0"/>
    <view class="f_column_center">
      <view class="f_row_center use-info-cls" style="width: 100%;flex-flow:wrap;padding: 20rpx 10rpx 10rpx 10rpx;">
        <view @click="itemClick(item)" v-for="(item,ind) in list" :key="ind"
              class="item-pie f_column">
          <view class="f_row_center item-use-card-cls">
            <image :src="item.img" style="height: 52rpx;width: 58rpx;margin-right: 10rpx"/>

            <view class="f_column">
              <view>{{ item.title }}</view>

              <span style=" color: #2360BB;font-size: 28rpx">
            {{ area(item) }}
          </span>
            </view>

          </view>

        </view>
      </view>
    </view>

  </view>
</template>

<script lang="ts">
import {Vue, Component, Prop} from "vue-property-decorator";
import XRouterConfig from "@/api/XRouterConfig";
import {mixins} from "vue-class-component";
import FormatCount from "@/mixins/FormatCount";
import ItemBlueTitleView from "@/pages/components/item_blue_title_view.vue";

@Component({
  components: {
    ItemBlueTitleView,
  }
})
export default class UseInfoDataView extends mixins(Vue, FormatCount) {
  @Prop() info?: any;


  get list() {
    let list = [
      {
        img: '/static/pzmj.png',
        title: '配置面积',
        content: this.info.pzAreaTotal,
        path: 'data_use_info',
        type: 0,
      },
      {
        img: '/static/zymj.png',
        title: '租用面积',
        content: this.info.zyAreaTotal,
        path: 'data_use_info',
        type: 1,
      },
      {
        img: '/static/xzmj.png',
        title: '闲置面积',
        content: (this.info.ldxzArea ?? 0 + this.info.dwxzArea ?? 0),
        path: 'data_idle_area',
        type: 2,
      },
      {
        img: '/static/czcj.png',
        title: '出租出借',
        content: (this.info.czofficetotle ?? 0 + this.info.cjofficetotle ?? 0),
        path: 'data_rent',
        type: 3,
      },
    ];

    return list
  }


  area(item: any) {
    return this.formatArea(item.content ?? 0)
  }

  itemClick(item: any) {
    XRouterConfig.goTo(item.path, {type: item.type})
  }


}
</script>

<style scoped>
.head-hint-bg {
  background: url("@/static/use_hint.png") no-repeat;
  background-size: 100% 100%;
  height: 62rpx;
  color: #63CB5E;
  font-size: 30rpx;
  padding: 0rpx 60rpx;
}

.item-pie {
  width: 50%;
  font-size: 28rpx;
  /*padding: 20rpx;*/
  /*margin-right: 20rpx;*/
  /*margin-bottom: 20rpx;*/
  /*margin: 10rpx;*/
}

.use-info-cls {
  background: linear-gradient(0deg, #6BAFF7, #66A0F6);
  border-radius: 20rpx;
  color: #4B8EF9;
}

.item-use-card-cls {
  background: #DBEAFC;
  border-radius: 10rpx;
  padding: 20rpx;
  margin: 10rpx;
}
</style>